import { ref, reactive, onMounted } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import { getCorpListApi } from "@/api/corpApi";

export function useColumns() {
  const selectValue = ref("");
  const getStatusType = (type, text = false) => {
    switch (type) {
      case 0:
        return text ? "未审核" : "danger";
      case 1:
        return text ? "启用" : "primary";
      case 2:
        return text ? "禁用" : "info";
    }
  };
  const columns: TableColumnList = [
    {
      label: "公司简称",
      prop: "shortName",
      minWidth: 200
    },
    {
      label: "企业负责人",
      prop: "principal",
      minWidth: 150
    },
    {
      label: "联系电话",
      prop: "phone",
      minWidth: 200
    },
    {
      label: "状态",
      prop: "status",
      cellRenderer: ({ row }) => (
        <el-tag size="large" type={getStatusType(row.status)} effect="light">
          {getStatusType(row.status, true)}
        </el-tag>
      )
    }
  ];

  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    layout: "prev, pager, next",
    total: 0,
    background: true,
    size: "small"
  });
  const dataList = ref([]);
  async function onSearch() {
    const { result } = await getCorpListApi({ status: 1 });
    dataList.value = result.list;
    pagination.total = result.total;
    pagination.pageSize = result.per_page;
    pagination.currentPage = result.current_page;
  }
  /** 高亮当前选中行 */
  function rowStyle({ row: { name } }) {
    return {
      cursor: "pointer",
      background: name === selectValue.value ? "var(--el-fill-color-light)" : ""
    };
  }

  onMounted(() => {
    onSearch();
  });
  return {
    columns,
    pagination,
    selectValue,
    dataList,
    rowStyle
  };
}
